<template>
    <div class="record">
        <div class="record-top">
            <SelectsList placeholder="请选择充电站" :options="options1"></SelectsList>
            <SelectsList placeholder="请选择支付方式" :options="options2"></SelectsList>
            <SelectsList placeholder="请选择交易状态" :options="options3"></SelectsList>
            <el-input v-model="input" placeholder="充电桩名称/订单编号/用户账号" />
            <el-button type="primary" @click="getKeysFiltter">查询</el-button>
            <el-button type="success">导出</el-button>
        </div>
        <div class="record-table">
            <WTable :data="tableDataFiltter?.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
                class="box1">
            </WTable>
            <div class="record-table-box">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :disabled="disabled"
                    :background="background" layout="prev, pager, next, jumper" :total="totalSize" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import SelectsList from "../../layout/encapsulation/selects.vue"
import WTable from "../../layout/encapsulation/WTable.vue"
import { getRecord } from "@/api/record"
// import Mock from 'mockjs'
// import Wpaging from "@/layout/encapsulation/Wpaging.vue"

const input = ref()
const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(false)
const disabled = ref(false)
const tableData = ref(null)
const tableDataFiltter = ref()
const totalSize = computed(() => {
    return tableDataFiltter.value?.length
})

const options1 = [
    {
        value: '万利风云充电站',
        label: '万利风云充电站',
    },
    {
        value: '天启充电站',
        label: '天启充电站',
    },
]
const options2 = [
    {
        value: '支付方式',
        label: '支付方式',
    },
    {
        value: '微信支付',
        label: '微信支付',
    },
    {
        value: '钱包余额',
        label: '钱包余额',
    },
    {
        value: '现金',
        label: '现金',
    },
    {
        value: '射频卡',
        label: '射频卡',
    },
]
const options3 = [
    {
        value: '交易状态',
        label: '交易状态',
    },
    {
        value: '未支付',
        label: '未支付',
    },
    {
        value: '充电中',
        label: '充电中',
    },
    {
        value: '停止中',
        label: '停止中',
    },
    {
        value: '完成',
        label: '完成',
    },
    {
        value: '退款成功',
        label: '退款成功',
    },
]

const addRecord = async () => {
    tableData.value = await getRecord()
    // 备份一份数据来渲染表格和过滤
    tableDataFiltter.value = tableData.value
}

// 点击了搜索按钮
const getKeysFiltter = () => {
    // 什么都没输入，返回完整的数据
    if (!input.value) {
        tableDataFiltter.value = tableData.value
        return
    }

    // 输入了东西，返回筛选后的数据
    tableDataFiltter.value = tableData.value.filter((item: any) => item.name.includes(input.value) || item.order.toString().includes(input.value) || item.user.includes(input.value))
}

onMounted(() => {
    addRecord()
})
// 使用mock生成数据
// for (let i = 0; i < 240; i++) {
//     tableData.push(Mock.mock({
//         "id":'@guid()',//随机生成用户id
//         "order":"@natural(11111111111111, 99999999999999)",//随机生成订单编号
//         "user": "@cname",//随机生成中文名字
//         "telephone": getPhone(),//随机生成手机号
//         "amount": `@natural(1, 100).@natural(1,10)`,//随机生成1-100的数字,充值金额
//         "consumption": `@natural(1, 100).@natural(10,100)`,//随机生成消费金额
//         "pay":getPay(),//随机生成支付方式
//         "name":getName(),//随机生成充电站名称
//         "number":"DZ@natural(1000000000,10000000000)",
//         "quantity":"@natural(1, 100).@natural(10,100)",//随机生成充电电量
//         "duration":"@natural(1, 24)",//随机生成充电时长
//         "state":"充电中",
//         "time": "@datetime",//随机生成日期时间

//         // "string": "@cword", // 生成一个随机字符串
//         // str: '@cword(10,15)',// 生成一个10-15位随机字符串
//         // title: "@ctitle(5,8)", // 生成指定范围的标题
//         // sentence: '@csentence(50,80)', // 生成指定范围的句子
//         // content: '@cparagraph()', // 随机生成段落
//         // idCard: '@id()', // 身份证号码
//         // address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
//     }
//     ))
// }

// function getPhone() {
//     //  0-2
//     var phonePrefixs = ['132', '135', '189','136','138','151','159','187'] // 自己写前缀哈
//     const index = Math.ceil(Math.random() * phonePrefixs.length - 1)
//     const phone = phonePrefixs[index] + Mock.mock(/\d{8}/) //Number()
//     return phone
// }
// function getPay(){
//     var PayPrefixs=['微信支付','钱包余额','现金','射频卡']
//     const index=Math.ceil(Math.random() * PayPrefixs.length - 1)
//     const pay=PayPrefixs[index]
//     return pay
// }
// function getName(){
//     var namePrefixs=['万利风云充电站','天启充电站']
//     const name=namePrefixs[Math.ceil(Math.random() * namePrefixs.length - 1)]
//     return name
// }

// console.log(tableData, "data")

// // 拓展mockjs
// Mock.Random.extend({
//     phone: function () {
//         var phonePrefixs = ['132', '135', '189'] // 自己写前缀哈
//         const phone=this.pick(phonePrefixs) + Mock.mock(/\d{8}/) //Number()
//         return phone
//     }
// })
// console.log(Mock.Random.phone())
// // 生成 1 - 10 个 随机手机号码
// let { phone } = Mock.mock({
//     //phone|240生成240个电话号码
//     'phone|240': ['@phone']
// })
// console.log(phone, "phone")
</script>

<style scoped lang="scss">
.record-top {
    height: 80px;
    width: 100%;
    background: blue;
    display: flex;
    align-items: center;
}

.box1 {
    text-align: center;
}

.el-input {
    width: 300px;
    font-size: 14px;
    margin-left: 20px;
}

.el-button {
    margin-left: 20px;
}

.box {
    background: green;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}

.record-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.record-table-box {
    margin-top: 40px;
    display: flex;
    text-align: center;

    .table-input {
        display: flex;
        align-items: center;

        .input {
            width: 40px;
            background: #ccc;
            border: none;
            height: 20px;
        }
    }

}
</style>